<template>
  <div class="location">
    <!-- 城市头部 -->
    <div class="home-location-header">
      <van-nav-bar title="选择城市" left-arrow @click-left="onClickLeft" />
      <van-search
        v-model="value"
        shape="round"
        background="transparent"
        placeholder="输入城市"
        show-action
        @search="onSearch"
      >
        <template #action>
          <div @click="onSearch">取消</div>
        </template>
      </van-search>
    </div>
    <div class="height-null"></div>
    <div v-if="valueList.length !== 0" class="home-location-valueList">
      <p
        v-for="item in valueList"
        :key="item.id"
        class="valueList-only"
        @click="choiceCity(item.id,item.name)"
      >{{item.name}}</p>
    </div>
    <div id="allmap"></div>

    <div class="home-city-navigation" @click="goUP">
      <span class="text">定位</span>
      <span class="text">历史</span>
      <span class="text">热门</span>
    </div>
    <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
      <div>
        <div class="home-location-hotcity">
          <!-- 导航 -->
          <!-- 热门城市 -->
          <ul class="home-city-header">
            <li class="homen-city-position city-list">
              <p class="city-position-title">定位</p>
              <div class="city-position-list">
                <span class="city-only active">{{cityPosition}}</span>
                <span class="city-icon iconfont icon-dingwei" @click="positionCity"></span>
              </div>
            </li>
            <li class="homen-city-history city-list">
              <p class="city-history-title">历史</p>
              <div class="city-history-list">
                <span class="city-only" v-for="item in cityHistory" :key="item.id">{{item.name}}</span>
              </div>
            </li>
            <li class="homen-city-hot city-list">
              <p class="city-hot-title">热门</p>
              <div class="city-hot-list">
                <span
                  v-for="item in hotlists"
                  :key="item.id"
                  class="city-only"
                  @click="choiceCity(item.id,item.name)"
                >{{item.name}}</span>
              </div>
            </li>
          </ul>
        </div>
        <!-- 字母选择 -->
        <div class="home-location-city">
          <van-index-bar @select="add"  highlight-color="#828282">
            <div v-for="(ele,key,index) in lists" :key="index" class="home-listmap">
              <van-index-anchor :index="key" >{{key}}</van-index-anchor>
              <van-cell
                :title="item.name"
                v-for="item in ele"
                :key="item.id"
                @click="choiceCity(item.id,item.name)"
              highlight-color="red"
              />
            </div>
          </van-index-bar>
        </div>
        <div class="letterBox" v-if="letterShow">{{letter}}</div>
      </div>
    </van-pull-refresh>
  </div>
</template>

<script>
// import "@/assets/css/reset.css";
import { mapState } from "Vuex";
export default {
  data() {
    return {
      indexList: ["定位", "历史", "热门"],
      value: "",
      letter: "A",
      save: "",
      letterShow: false,
      isLoading: false,
      valueList: []
    };
  },
  computed: {
    ...mapState({
      lists: "lists",
      hotlists: "hotlists",
      cityHistory: "cityHistory",
      cityPosition: "cityPosition"
    })
  },
  created() {},
  mounted() {
    this.positionCity();
  },
  methods: {
    onRefresh() {
      setTimeout(() => {
        this.isLoading = false;
        this.positionCity();
      }, 200);
    },
    onClickLeft() {
      this.$router.go(-1);
    },

    goUP() {
      window.scrollTo(0, 0);
    },
    choiceCity(v, t) {
      let obj = {
        name: t,
        id: v
      };
      this.$store.commit("choiceCity", obj);
      this.valueList = [];
      this.value = "";
    },

    positionCity() {
      var map = new BMap.Map("allmap");
      var point = new BMap.Point(116.331398, 39.897445);
      map.centerAndZoom(point, 12);
      let cityNamestr = "";
      let _this = this;
      function myFun(result) {
        var cityName = result.name;
        map.setCenter(cityName);
        cityNamestr = cityName;
        _this.$store.commit("positionCity", cityNamestr);
      }
      var myCity = new BMap.LocalCity();
      myCity.get(myFun);
    },
    add(index) {
      this.letter = index;
      this.letterShow = true;
      if (!this.save) {
        this.letterShow = true;
        this.save = setTimeout(() => {
          this.letterShow = false;
          this.save = null;
        }, 600);
      }
    },
    onSearch() {
      let arr = [];
      for (const key in this.lists) {
        arr = this.lists[key].filter(
          ele =>
            !this.value ||
            ele.name.toLowerCase().includes(this.value.toLowerCase())
        );
        if (arr.length !== 0) {
          break;
        }
      }
      this.valueList = arr;
    },
    tounicode(data) {
      if (data == "") return "请输入汉字";
      var str = "";
      for (var i = 0; i < data.length; i++) {
        str += "\\u" + parseInt(data[i].charCodeAt(0), 10).toString(16);
      }
      return str;
    }
  }
};
</script>

<style scoped lang="scss">

.van-search{
  width: 95%;
  margin: 0 auto;
}
.van-pull-refresh__head {
  height: 0;
}
.van-search__content {
  background-color: #33363D;
}
.van-cell::after {
  position: static;
}
[class*="van-hairline"]::after {
  position: static;
}
.van-field__control {
  color: #ffffff;
}
.van-search__action {
  color: #ffffff;
}
.van-nav-bar {
  background-color: #33363d;
  background-color: transparent;
  .van-nav-bar__title {
    color: #ffffff;
  }
}
.van-nav-bar__text {
  color: #ffffff;
}
.van-nav-bar .van-icon {
  color: #ffffff;
}

.van-index-anchor {
  color: #ffffff;
}
.van-cell {
  background-color: #23262d;
  color: #ffffff;
  border: 0;
}
.van-index-bar__sidebar {
  color: #828282;
  margin-top: 70px;
  margin-right: 15px;
}
.van-index-bar__index{
  line-height: 1.3;
}



.location {
  height: 100vh;
  
}

.height-null {
  height: 100px;
  width: 100%;
}
.home-location-valueList {
  width: 90%;
  margin: 0 auto;
  margin-top: 10px;
  .valueList-only {
    width: 100%;
    height: 40px;
    text-align: left;
    color: #fff;
    font-size: 14px;
  }
}

.wrapper {
  height: 90vh;
}
.home-listmap {
  text-align: left;
}
.home-title {
  position: fixed;
  top: 50px;
  right: 0;
}
.home-location-header {
  background-color: #23262d;
  width: 100%;
  position: fixed;
  top: 0;
  z-index: 99;
  left: 0;
}
.home-location-city {
  margin-top: 30px;
}
.home-city-navigation {
  position: fixed;
  right: 0;
  top: 21%;
  width: 24px;
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  align-content: center;
  font-size: 12px;
  color: rgba(241, 163, 99, 1);
  line-height: 18px;
  z-index: 99;
  margin-right:15px;

}
.home-location-hotcity {
  margin-top: 0px;
  .home-city-header {
    text-align: left;
    width: 100%;
    .city-list {
      z-index: 1;
      box-sizing: border-box;
      padding: 0 0.426667rem;
      font-size: 0.373333rem;
      line-height: 0.853333rem;
      background-color: transparent;
      color: #ffffff;
      margin-top: 10px;
      overflow: hidden;
      p {
        font-size: 12px;
        color: rgba(247, 247, 247, 1);
        line-height: 12px;
        margin-bottom: 15px;
      }

      .city-only {
        width: 90px;
        text-align: center;
        background: rgba(51, 54, 61, 1);
        font-size: 14px;
        color: rgba(247, 247, 247, 1);
        line-height: 30px;
        float: left;
        margin-right: 15px;
        margin-top: 15px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .city-only.active {
        border: 2px solid rgba(249, 195, 74, 1);
      }
      .city-icon {
        width: 20px;
        line-height: 30px;
        float: left;
        margin-right: 15px;
        margin-top: 15px;
      }
    }
  }
}
.letterBox {
  width: 100px;
  position: fixed;
  top: 50%;
  left: 50%;
  margin-top: -50px;
  margin-left: -50px;
  background-color: #b8b8b8;
  text-align: center;
  line-height: 100px;
  font-size: 20px;
  opacity: 0.8;
}
</style>
